<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld msg="Welcome to Vue3" title="Hello Vue 3" />
  <div class="vue3-start">
    <div class="vue3-starter-menu">
      <ul>
        <li v-for="menu in menus" :key="menu.id" class="menu-list">
          <router-link :to="menu.path">{{ menu.title }}</router-link>
        </li>
      </ul>
    </div>
    <div class="vue3-starter-content">
      <router-view />
      <!-- <router-view v-slot="{ Component }">
        <transition>
          <keep-alive>
            <component :is="Component" />
          </keep-alive>
        </transition>
      </router-view>-->
    </div>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

import { reactive, toRefs } from 'vue'

export default {
  name: 'App',
  components: {
    HelloWorld,
  },
  setup() {
    const state = reactive({
      menus: [
        {
          title: '新特性',
          id: 'new_features_xxoo11',
          path: '/newFeatures',
        },
        {
          title: '非兼容的变更',
          id: 'incompatible_features_xxoo11',
          path: '/incompatibleFeatures',
        },
        {
          title: '废除的特性',
          id: 'abolish_features_xxoo11',
          path: '/abolishFeatures',
        },
        {
          title: 'todolist实例',
          id: 'todo_list_xxoo11',
          path: '/todoLists',
        },
        {
          title: 'vue-router@4',
          id: 'vue_router@4_xxoo11',
          path: '/vueRouter4',
        },
        {
          title: 'vuex@4',
          id: 'vuex@4_xxoo11',
          path: '/vuex4',
        },
      ]
    })

    return {
      ...toRefs(state)
    }
  }
}
</script>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.vue3-start {
  text-align: left;
  display: flex;
  .vue3-starter-menu {
    flex: 1;
  }
  .vue3-starter-content {
    flex: 4;
  }
}
</style>
